<template>
	<view>
		<nav-bar ref="navBar" transparentFixedFontColor="#FFF" type="transparentFixed" fontColor="#FFF" title="推广中心"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="user_extend_bginfo">
			<view class="user_info">
				<image :src="userInfo.headImg" mode="aspectFill"></image>
				<view class="user_name">
					<text>{{userInfo.nickName || ""}}</text>
					<view>推荐人：{{spreadUserInfo.recommend || ""}}</view>
				</view>
			</view>
			<view class="cashwithdrawal_info">
				<view class="withdrawal_limit">
					<view>
						<view>可提现佣金</view>
						<text>{{spreadUserInfo.freeMoney || 0}}</text>
					</view>
					<view>
						<view>结算中佣金</view>
						<text>{{spreadUserInfo.countMoney || 0}}</text>
					</view>
				</view>
				<button @click="onPageJump('/pagesMy/my/wallet/wallet')">提现</button>
			</view>
		</view>
		<view class="user_extend_options">
			<view @click="onPageJump('/pagesMy/my/distribution/saleOrder')">
				<image src="../../../static/icon/ic_promotion_order.png" mode="aspectFit"></image>
				<text>分销订单</text>
			</view>
            <view v-if="module.shareGuest" @click="onPageJump('/pagesMy/my/distribution/productsFeatured')">
            	<image src="../../../static/icon/ic_promotion_order.png" mode="aspectFit"></image>
            	<text>商品推荐订单</text>
            </view>
            <view v-if="module.shareGuest" @click="onPageJump('/pagesMy/my/distribution/shopFeatured')">
            	<image src="../../../static/icon/ic_promotion_order.png" mode="aspectFit"></image>
            	<text>店铺推荐订单</text>
            </view>
			<view @click="onPageJump('/pagesMy/my/wallet/profitBill')">
				<image src="../../../static/icon/ic_promotion_detail.png" mode="aspectFit"></image>
				<text>提现明细</text>
			</view>
			<view @click="onPageJump('/pagesMy/my/distribution/team?numOne='+spreadUserInfo.numOne+'&numThree='+spreadUserInfo.numThree+'&numTwo='+spreadUserInfo.numTwo)">
				<image src="../../../static/icon/ic_promotion_team.png" mode="aspectFit"></image>
				<text>我的团队</text>
			</view>
			<view @click="onPageJump('/pages/user/protocol?type=1401')">
				<image src="../../../static/icon/ic_promotion_detail.png" mode="aspectFit"></image>
				<text>分销说明</text>
			</view>
			<view @click="onPageJump('/pagesMy/my/distribution/scanCode?nickName='+spreadUserInfo.nickName)">
				<image src="../../../static/icon/ic_promotion_card.png" mode="aspectFit"></image>
				<text>推广二维码</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
export default {
	data() {
		return {
			spreadUserInfo:{},
			module: {}
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	//第一次加载
	onLoad(e) {
		this.module = this.$base.module;
	},
	//页面显示
	onShow() {
		if(this.userInfo.token){
			this.loadData()
		}
	},
	//方法
	methods: {
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		// 获取数据
		loadData(){
			this.$http.get('api/mime/spread/v1/info').then(res => {
				this.spreadUserInfo = res;
				this.$store.commit("setWebViewUrl",res.qrCode);
			});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	onPageScroll (e) {
		this.$refs.navBar.pageScroll(e);
	},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
page{
	background: #FFFFFF;
}
.user_extend_bginfo {
	background-image: url('http://qn.kemean.cn//upload/202005/20/1589942815732d56u207f.png');
	background-size: 100% 100%;
	background-position: center bottom;
	width: 100%;
	height: 462rpx;
	padding: 158rpx 40rpx 30rpx 30rpx;
	.user_info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		> image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
		.user_name {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			color: #ffffff;
			padding-left: 30rpx;
			> text {
				font-size: 32rpx;
				padding-bottom: 20rpx;
			}
			> view {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 5rpx 20rpx;
				font-size: 24rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 21rpx;
			}
		}
	}
	.cashwithdrawal_info {
		padding-left: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.withdrawal_limit{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 54rpx 0rpx;
			>view{
				display: flex;
				flex-direction: column;
				align-items: center;
				>view{
					font-size: 24rpx;
					color: rgba(255,255,255,0.6);
					padding: 0rpx 30rpx;
				}
				>text{
					color: #FFFFFF;
				}
			}
		}
		>button{
			width: 120rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: solid 1rpx #ffffff;
			color: #ffffff;
			background: inherit;
			font-size: 28rpx;
		}
	}
}
.user_extend_options{
	padding: 55rpx 0rpx 70rpx 0rpx;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	>view{
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		color: #333333;
		width: 33.33%;
		padding: 50rpx 0rpx;
		>image{
			width: 36rpx;
			height: 40rpx;
			margin-bottom: 15rpx;
		}
	}
}

</style>
